<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <div>
    <!--/*@thymesVar id="head" type="java.lang.String"*/-->
        <span th:text="#{${head}(${isEven})}">default info</span>
        <!--/*@thymesVar id="test" type="com.qiandw.model.TestModel"*/-->
        <span th:object="${test}">
            [[*{firstName}]] <br/>
            [[*{lastName}]] <br/>
            [[*{city}]]
        </span>
        <!--/*@thymesVar id="isEven" type="java.lang.Boolean"*/-->
        <!--/*@thymesVar id="row" type="com.qiandw.model.TestModel"*/-->
        <span th:class="${isEven ? 'even' : 'odd'}" th:attr="data-row-id=${row.id}"></span>
        <span th:text="${'product' + @definedVeriableExpression.getAsBoolean('haha')}"></span>
    </div>
    <div id="app"></div>
    <div id="vue-app" class="container">
        <span th:text="#{homepage.header}"></span>
        {{message}}
    </div>
    <script type="text/javascript" th:src="@{/webjars/react/16.1.0/react.production.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/react/16.1.0/react-dom.production.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/babel/5.8.38/browser.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/dist/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/vue/2.5.16/dist/vue.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/vue-resource/1.3.4/dist/vue-resource.js}"></script>
    <script type="text/babel">
        class MessageBox extends React.Component {
            render(){
                return ( <h1 onClick={MessageBox.alertMe}>你好世界!!!</h1> )
            }
            alertMe(){
                alert('你刚才点了我一下');
            }
        }
        const div = $("#app").get(0);
        ReactDOM.render( <MessageBox />, div);
    </script>
    <script type="text/javascript">
        Vue.options.emulateJSON = true;
        new Vue({
           el : '#vue-app',
           data : {
               message : 'Test Vue.js!'
           }
        })
    </script>
</body>
</html>